<script setup>
</script>

<template>
  <div id="app">
    <nav class="nav">
      <router-link to="/" class="nav-link">首页</router-link>
      <router-link to="/cart" class="nav-link">购物车</router-link>
      <router-link to="/product-list" class="nav-link">产品列表</router-link>
      <router-link to="/product-detail/123" class="nav-link">产品详情</router-link>
      
      <router-link to="/checkout" class="nav-link">检查</router-link>
      <router-link to="/profile" class="nav-link">用户</router-link>
      <router-link to="/search" class="nav-link">搜索关键词</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.nav {
  padding: 20px;
  background: #f8f8f8;
  margin-bottom: 20px;
}
.nav-link {
  margin-right: 20px;
  text-decoration: none;
  color: #333;
}
.nav-link.router-link-exact-active {
  color: #42b883;
  font-weight: bold;
}
</style>